<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram 4.13.1</title>
</head>
<body>
<canvas id="circuitCanvas" width="550" height="350"></canvas>

<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Dimensions ---
    const x0 = 100; // Initial x position of the leftmost vertical wire
    const y0 = 80;  // Y position of the top rail
    const w = 150;  // Horizontal spacing between vertical elements
    const h = 100;  // Vertical spacing (height of the ladder)
    const res_w_h = 60; // Resistor width (for horizontal resistors)
    const res_h_h = 20; // Resistor height (for horizontal resistors)
    // For vertical resistors, width and height are swapped
    const res_w_v = res_h_h;
    const res_h_v = res_w_h;
    const lead = 40; // Length of input/output leads

    // --- Helper function to draw a resistor and its label ---
    function drawResistor(x, y, width, height, label, labelPos) {
        // Draw the rectangle, filled with white to hide the wire underneath
        ctx.fillStyle = 'white';
        ctx.fillRect(x, y, width, height);
        ctx.fillStyle = 'black';
        // Draw the border of the resistor
        ctx.strokeRect(x, y, width, height);

        // Draw the label
        ctx.font = 'italic 18px Times New Roman';
        let labelX, labelY;
        switch (labelPos) {
            case 'above':
                labelX = x + width / 2;
                labelY = y - 10;
                break;
            case 'below':
                labelX = x + width / 2;
                labelY = y + height + 12;
                break;
            case 'right':
                labelX = x + width + 10;
                labelY = y + height / 2;
                break;
            case 'left':
                labelX = x - 10;
                labelY = y + height / 2;
                break;
        }
        ctx.fillText(label, labelX, labelY);
    }

    // --- Draw the main circuit wires ---
    // This is done by drawing continuous lines and then placing the resistor components on top.
    ctx.beginPath();
    // Top rail
    ctx.moveTo(x0 - lead, y0);
    ctx.lineTo(x0 + 2 * w + lead, y0);
    // Bottom rail and its output lead
    ctx.moveTo(x0 - lead, y0 + h);
    ctx.lineTo(x0 + 2 * w + lead, y0 + h);
    // Vertical connections
    ctx.moveTo(x0, y0);
    ctx.lineTo(x0, y0 + h);
    ctx.moveTo(x0 + w, y0);
    ctx.lineTo(x0 + w, y0 + h);
    ctx.moveTo(x0 + 2 * w, y0);
    ctx.lineTo(x0 + 2 * w, y0 + h);
    ctx.stroke();

    // --- Draw Resistors ---
    // Horizontal resistors
    drawResistor(x0 + w/2 - res_w_h/2, y0 - res_h_h/2, res_w_h, res_h_h, 'r', 'above');
    drawResistor(x0 + 1.5*w - res_w_h/2, y0 - res_h_h/2, res_w_h, res_h_h, 'r', 'above');
    drawResistor(x0 + w/2 - res_w_h/2, y0 + h - res_h_h/2, res_w_h, res_h_h, 'r', 'below');
    drawResistor(x0 + 1.5*w - res_w_h/2, y0 + h - res_h_h/2, res_w_h, res_h_h, 'r', 'below');

    // Vertical resistors
    drawResistor(x0 - res_w_v/2, y0 + h/2 - res_h_v/2, res_w_v, res_h_v, 'r', 'right');
    drawResistor(x0 + w - res_w_v/2, y0 + h/2 - res_h_v/2, res_w_v, res_h_v, 'r', 'right');
    drawResistor(x0 + 2*w - res_w_v/2, y0 + h/2 - res_h_v/2, res_w_v, res_h_v, 'r', 'right');

    // --- Draw Dashed Box ---
    ctx.beginPath();
    ctx.setLineDash([5, 4]);
    ctx.lineWidth = 1;
    const box_x = x0 - lead - 15;
    const box_y = y0 - 30;
    const box_w = 2 * w + 2 * lead + 30;
    const box_h = h + 60;
    ctx.strokeRect(box_x, box_y, box_w, box_h);
    
    // Reset line style to default
    ctx.setLineDash([]);
    ctx.lineWidth = 1.5;

    // --- Draw Caption ---
    ctx.font = '24px "SimSun"'; // Use a font that supports Chinese characters
    ctx.fillText('电图 4.13.1', canvas.width / 2, box_y + box_h + 40);

</script>

</body>
</html>